<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="人生就是一部小说,记录生活的点滴" />
    <meta name="keywords" content="记录生活,小说人说,分享你的生活动态,订阅他人的分享" />
    <script>
    window._time = [Date.now()];
    </script>
    <link rel="stylesheet" href="/faceb-cupt/css/reset.min.css" />
    <link rel="stylesheet" href="/faceb-cupt/css/course.min.css" />
    <link rel="stylesheet" href="/faceb-cupt/util/font-awesome-3.2.1/css/font-awesome.min.css" />
    <script src="/faceb-cupt/js/lib/jq.js"></script>
    <title>我的课表</title>
</head>

<body>
    <div class="page-header clearfix">
        <h1 class="page-header-title pull-left">每个人的人生都是一部小说</h1>
        <div class="page-header-personal pull-right">
            <a href="/faceb-cupt/tpl/profile" class="personal-photo">
                <span class="name">君逸</span>
                <img src="/faceb-cupt/img/avtar.png" alt="test" />
            </a>
        </div>
    </div>
    <div class="page-aside">
        <ul class="navbar">
            <li>
                <a href="/faceb-cupt/tpl/index" class="home">
                    <i class="icon-home"></i>
                </a>
                <a href="javascript:void(0)" class="js-gocenter">
                    <i class="icon-user"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="page-content">
        <p class="course-title">${username}的课表</p>
        <table id="table-delegate" width="100%" border="1" bordercolor="#e2fad6" cellspacing="0" cellpadding="0" height="372">
            <tbody>
                <tr>
                    <td width="12%" bgcolor="e2fad6">
                        <div align="center"></div>
                    </td>
                    <td width="11%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">星期一</font>
                        </div>
                    </td>
                    <td width="13%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">星期二</font>
                        </div>
                    </td>
                    <td width="13%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">星期三</font>
                        </div>
                    </td>
                    <td width="13%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">星期四</font>
                        </div>
                    </td>
                    <td width="13%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">星期五</font>
                        </div>
                    </td>
                    <td width="12%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">星期六</font>
                        </div>
                    </td>
                    <td width="13%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">星期日</font>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td height="58" width="12%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">一二节</font>
                        </div>
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">
                       
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">
                       
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">
                       
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                </tr>
                <tr>
                    <td height="58" width="12%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">三四节</font>
                        </div>
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">
                       
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">
                        
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">
                       
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                </tr>
                <tr>
                    <td height="58" width="12%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">五六节</font>
                        </div>
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">
                        
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">
                       
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">
                       
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">
                        
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                </tr>
                <tr>
                    <td height="58" width="12%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">七八节</font>
                        </div>
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">
                        
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">
                        
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">
                       
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">
                       
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                </tr>
                <tr>
                    <td height="58" width="12%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">九十节</font>
                        </div>
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">
                       
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                </tr>
                <tr>
                    <td height="58" width="12%" bgcolor="e2fad6">
                        <div align="center">
                            <font color="#339900">十一二节</font>
                        </div>
                    </td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                    <td class="td-item" height="58" width="11%" align="center">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
    <style>
        #mask {position: fixed;height: 100%;top: 0;bottom: 0;right: 0;left: 0;background-color: rgba(0,0,0, 0.5);z-index: 9998;display: none;}
        #wrap {width: 400px;height: 500px;padding: 30px;margin: -265px 0 0 -215px; position: fixed;top: 50%;left: 50%;
            z-index: 9999;background-color: #fff;display: none;}
        h1.title {font-size: 30px;text-align: center;}
        div#xingqi {
    float: left;
    width: 50%;
    font-size: 20px;
    color: red;
    padding: 20px 0;
}
div#cls {
    margin-left: 50%;
    font-size: 20px;
    color: red;
    padding: 20px 0;
}
.input-row {
    padding: 5px 0;
}
.input-row label {
    display: inline-block;
    font-size: 16px;
}.input-row input {
    display: inline-block;
    width: 100%;
        height: 25px;
    margin-top: 10px;
}
.input-row button {
    width: 105px;
    height: 30px;
}
    </style>
    <div id="mask"></div>
    <div id="wrap">
        <h1 class="title">课表修改</h1>
        <div id="xingqi"></div><div id="cls"></div>
        <form action="" id="form">
           
            <div class="input-row">
                <label for="">课程名:</label><input name="course" type="text" id="course" class="js-course">
            </div>
            <div class="input-row">
                <label for="">老师:</label><input name="name" type="text" id="name" class="js-name">
            </div>
            <div class="input-row">
                <label for="">教室:</label><input name="class" type="text" id="cls" class="js-cls">
            </div>
           
           
            <div class="input-row">
                <button id="sure" type="button">确定修改</button>
                <button id="cancel" type="button">取消</button>
            </div>
        </form>
    </div>

    <script type="text/javascript" >
        var app={
            init:function(){
                this.render();

                var user=app.readCookie("userid");
                var locations=window.location.href;
                var pageuser=locations.substring(locations.indexOf("users")).split("/")[1];
               
                if(pageuser==user){
                      this.bindEvent();
                 }else{
                    console.log(user+"  "+pageuser);
                 }
               
            },
            render:function(){
                //course init render;
                var res=null;
                var locations=window.location.href;
                var pageuser=locations.substring(locations.indexOf("users")).split("/")[1];
               
                var url="/faceb-cupt/users/"+pageuser+"/courses";
                app.getRemoteData(url,"post",{},function(data){
                    console.log("111");
                    console.log(data);
                   if(data&&data.status=="0"){
                    //console.log(data);
                    res=data.data;
                    window.test=res["_1_courseid"];
                    res=JSON.parse(res["_1"]);

                   window.res=res;
                   app.renderTable(res);
                    
                   }
                });
            
            },


            bindEvent:function(){
                //go to center
                   $(".js-gocenter").on("click",function(e){
                var userid=document.cookie.split("=")[1];
                window.location.href="/faceb-cupt/tpl/center/users/"+userid;

            })

                //table item click
                    $("#table-delegate").on("click", '.td-item', function(){
                    var rownum = $(this).index();
                    var colnum = $(this).parent("tr").index();

                    var rowArr = ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"];
                    var colArr = ['一二节', '三四节', '五六节', '七八节', '九十节', '十一二节'];
                    var res=window.res;
                    window.posxy="_"+rownum+"_"+colnum;



                    $("#xingqi").html(rowArr[rownum-1]);
                    $("#cls").html(colArr[colnum-1]);

                    $("#mask").css("display", "block");
                    $("#wrap").css("display", "block");

                    
                    var course = $(this).find(".course").html();
                     $(".js-course").val(course);

                    var name = $(this).find(".name").html();
                    $(".js-name").val(name);
                    var cls = $(this).find(".cls").html();
                     $(".js-cls").val(cls);



               
                   


                    

                })
                $("#mask, #cancel").on("click", function(){
                    $("#mask").css("display", "none");
                    $("#wrap").css("display", "none");
                })
                
                $("#sure").on("click", function(){
                   /* var val = $("#form").serialize();
                    alert(val);*/
                    
                    var contents=[];
                    var course=$(".js-course").val();
                    contents.push(course);
                    var name=$(".js-name").val();
                    contents.push(name);
                    var cls=$(".js-cls").val();
                    contents.push(cls);
                    var locations=window.location.href;
                    var pageuser=locations.substring(locations.indexOf("users")).split("/")[1];

                    for(var i in res){
                        if(i==posxy){
                            res[i]=contents.join(",");
                           // return;
                        }
                    }
                    
                    var sendData={
                        c_id:window.test,
                        content:JSON.stringify(res),
                        c_term_count:"1"
                    };

                   console.log(sendData);
                    app.getRemoteData("/faceb-cupt/course/update","POST",sendData,function(data){
                        console.log(data);
                        if(data&&data.status==0){
                            window.location.reload();
                        }
                    })

                })


            },
            getRemoteData: function(url, method,data,callback) {
            //var result;
            $.ajax({
                type: method,
                url: url,
                data:data,
                dataType: "json"
            }).done(callback);

        },
            renderTable:function(data){
                var table=$("#table-delegate");
                var pos={};
                console.log(data);
                for(var i in data){
                    pos.x=i.split("_")[1];
                    pos.y=i.split("_")[2];
                    pos.info=data[i];
                    window.pos=pos;
                   var $tr=table.find("tr").eq(pos.y);
                   var $td=$tr.find("td").eq(pos.x);
                   window.$td=$td;
                   $td.data("y",pos.y);
                   $td.data("x",pos.x);

                   var infoArr;
                   window.info=pos.info;
                   if(pos.info.indexOf(",")!=-1){

                   infoArr=pos.info.split(",");
                   var insertInfo="<p class='course'>"+infoArr[0]+"</p>"+"<p class='name'>"+infoArr[1]+"</p>"+"<p class='cls'>"+infoArr[2]+"</p>";
                   $td.html(insertInfo); 

                   }
                   

                }



            },
            readCookie :function(name) {
                var cookieValue = "";
                var search = name + "=";
                if (document.cookie.length > 0) {
                    var offset = document.cookie.indexOf(search);
                    if (offset != -1) {
                        offset += search.length;
                       var end = document.cookie.indexOf(";", offset);
                        if (end == -1)
                            end = document.cookie.length;
                        cookieValue = unescape(document.cookie.substring(offset, end))
                    }
                }
                return cookieValue;
            }


        }
        app.init();
    </script>
    <script>
   


    </script>
</body>

</html>
